/* 排版注意事项：
    先给一个元素定位
    再根据定位来调整位置
    position absoulte:以浏览器框架为准定位，浏览器的缩放不影响被设为该定位的元素的位置，即不会导致元素挤压堆积
    position relative：以该元素的当前位置为准进行定位
    position fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
    position inherd：从父元素那里继承定位元素

    特殊：
    父相（父类为相对定位）子绝（子类为绝对定位）时：子绝父相的意思是在父类的position属性是relative的情况下，
    子类的position属性又是absolute的情况下，那么我们的子类这时其实不是在body中absolute而是在其父类的范围中absolute，
    最好给父类设置边界
     */


















/* 浮动用完一次一定要消除！！！！！不然下面的板块也会跟着浮动，导致排版混乱！！ */
.click{
    clear: both;
}

.return{
    top: 1%;
    position: fixed;
    left: 97%;
    border: 3px rgb(143, 128, 128) solid;
}
.box1{
  
    color: rgb(34, 33, 31);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border: 6px rgb(128, 126, 114) solid;
    border-bottom: 6px;
    border-bottom-color: rgb(63, 62, 57);
    border-bottom-style: dashed;
    padding: 10px;
    width: 900px;
    float: left;
    margin: 75px;
    font-size: 150%;
    word-spacing: 0.3em;
    line-height: 1.3em;
    border-radius: 10px;
}
.box2{
    color: rgb(34, 33, 31);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border: 6px rgb(128, 126, 114) solid;
    border-bottom: 6px;
    border-bottom-color: rgb(63, 62, 57);
    border-bottom-style: dashed;
    padding: 10px;
    width: 900px;
    float: left;
    margin: 75px;
    font-size: 150%;
    word-spacing: 0.3em;
    line-height: 1.3em;
    border-radius: 10px;
}
.box3{
    color: rgb(34, 33, 31);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border: 6px rgb(128, 126, 114) solid;
    border-bottom: 6px;
    border-bottom-color: rgb(63, 62, 57);
    border-bottom-style: dashed;
    padding: 10px;
    width: 900px;
    float: left;
    margin: 75px;
    font-size: 150%;
    word-spacing: 0.3em;
    line-height: 1.3em;
    border-radius: 10px;
}

.box4{
    position: relative;
    color: rgb(34, 33, 31);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border: 6px rgb(128, 126, 114) solid;
    border-bottom: 6px;
    border-bottom-color: rgb(63, 62, 57);
    border-bottom-style: dashed;
    padding: 10px;
    width: 90%;
    float: left;
    font-size: 150%;
    word-spacing: 0.3em;
    line-height: 1.3em;
    margin: 65px;
    border-radius: 10px;
}
.container{
    width: 80%;
    margin: 75px;
    font-size: 150%;
    word-spacing: 0.3em;
    line-height: 1.3em;
}
p {
    text-indent: 50px;
 }
h1{
    color: rgb(14, 14, 13);
    margin-top: -140px;
    font-size: 400%;
    font-family: cursive;
  
}
h2{
    color: rgb(0, 0, 0);
    font-family: fantasy;
}

h4{
    position: fixed;
    left: 93%;
    top: 94%;
}

h5{
    margin-left: 70px;
    position: relative;
    bottom: 40px;
    font-family: fantasy;
}
.table1{
    width: 200px;
    height: 10px;
    position: relative;
    left: 50px;
    right: 5px;
    top: 5px;
    bottom: 5px;
    margin: 30%;

}

#t1{
    float: left ;
    margin-left: 75px;
    margin-right: 130px;
}
#t2{
    float: left ;
}
#t3{
float: left;
margin-right: 160px;
margin-left: 75px;

}

.img1 img{
    position: absolute;
    height: 400px;
    width: 300px;
   float: left;
   border: 5px rgb(126, 120, 103) solid;
   margin-top: 50px;
   border-radius: 10px;
}

.img2 img{
    position: absolute;
    height: 400px;
    width: 300px;
    float: left;
    border: 5px rgb(126, 120, 103) solid;
    top: 950px;
    border-radius: 10px;

}
.img3 img{
    position: absolute;
    height: 400px;
    width: 300px;
    float: left;
    border: 5px rgb(126, 120, 103) solid;
    margin-top: 50px;
    border-radius: 10px;
    top: 1700px;
}

#img4{
    width: 28%;
    height: 30%;
    border-radius: 10px;
    margin-right: 30px;
    margin-left: 30px;
}


#f1{
position: relative;
    border: 5px gray solid;
    margin-right: 1200px;
    padding: 2px;
}
#lab1{
    text-align: justify;
}
#bu1 {
float: right;
margin-right: 15px;
background-color: rgb(173, 175, 165);
border-radius: 10px;
}

/* 鼠标悬浮在按钮上的状态 */
#bu1:hover{
    background-color: rgb(130, 240, 240);
}
/* 鼠标按下按钮时的状态 */
#bu1:active{
    background-color: beige;
}
#l{
    background-color: rgb(173, 175, 165);
    border-radius: 10px;
    margin-left: 240px;
}
#l:hover{
    background-color: rgb(130, 240, 240);
}
form{
    border-radius: 10px;
    
}

a{
    font-family: fantasy;
    text-decoration: dotted;
    color: rgb(122, 122, 122);
}
a:hover{
    color: rgb(5, 7, 6);
}

.bg{
    z-index: -999;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    /* 生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 */
    position: fixed;
    /* 下面一条为浏览器的兼容性透明度写法 */
    filter: alpha(opacity=20);   
    opacity: 0.2;
    background-image: url(../images/BACK.jpg) ; 
    background-size: cover;
    background-repeat: no-repeat;
   
}